<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="600px"
    class="custom-dialog"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-descriptions :column="1" border class="custom-descriptions">
      <el-descriptions-item label="生产加工单号">
        <div v-if="props.isBatch && selectedOrderNumbers.length > 0">
          <div v-for="(orderNo, index) in selectedOrderNumbers" :key="index">
            {{ orderNo }}
          </div>
        </div>
        <div v-else>
          {{ formData.orderNo || '-' }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="*当前步骤">
        <el-select v-model="formData.currentStep" placeholder="请选择" style="width: 100%">
          <el-option label="下料" value="下料"></el-option>
          <el-option label="焊接" value="焊接"></el-option>
          <el-option label="入库" value="入库"></el-option>
        </el-select>
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object,
    default: () => ({})
  },
  isBatch: {
    type: Boolean,
    default: false
  },
  selectedRows: {
    type: Array,
    default: () => []
  }
});

// Emits
const emit = defineEmits(['update:visible', 'success', 'cancel']);

// 对话框可见性
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});

// 对话框标题
const dialogTitle = computed(() => {
  return props.isBatch ? '批量编辑' : '编辑';
});

// 错误消息
const errorMessage = ref('');

// 表单数据
const formData = ref({
  orderNo: '',
  currentStep: ''
});

// 选中的订单编号列表
const selectedOrderNumbers = computed(() => {
  if (props.isBatch && props.selectedRows && props.selectedRows.length > 0) {
    return props.selectedRows.map(row => row.orderNo || '').filter(no => no);
  }
  return [];
});

// 监听编辑数据变化
watch(() => props.editData, (newData) => {
  if (newData && Object.keys(newData).length > 0) {
    formData.value = {
      orderNo: newData.orderNo || '',
      currentStep: newData.currentStep || ''
    };
  }
}, { deep: true, immediate: true });

// 处理关闭
const handleClose = () => {
  resetForm();
  emit('update:visible', false);
  emit('cancel');
};

// 处理取消
const handleCancel = () => {
  handleClose();
};

// 验证表单
const validateForm = () => {
  errorMessage.value = '';
  
  if (!formData.value.currentStep) {
    errorMessage.value = '请选择当前步骤';
    return false;
  }
  
  return true;
};

// 处理确认
const handleConfirm = () => {
  // 验证表单
  if (!validateForm()) {
    return;
  }
  
  // 构建提交数据
  const submitData = {
    ...formData.value,
    isBatch: props.isBatch,
    selectedOrderNumbers: selectedOrderNumbers.value
  };
  
  // 打印表单数据
  console.log('编辑表单数据:', submitData);
  
  // 发送成功事件
  emit('success', submitData);
  
  // 重置表单并关闭对话框
  handleClose();
};

// 重置表单
const resetForm = () => {
  formData.value = {
    orderNo: '',
    currentStep: ''
  };
  errorMessage.value = '';
};
</script>

<style scoped>
/* 对话框样式 */
:deep(.custom-dialog .el-dialog__header) {
  background-color: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
}

/* 自定义描述列表样式 */
.custom-descriptions {
  width: 100%;
}

:deep(.custom-descriptions .el-descriptions__item) {
  display: flex;
  align-items: flex-start;
}

:deep(.custom-descriptions .el-descriptions__label) {
  width: 140px;
  font-weight: 500;
  color: #606266;
  text-align: left;
  background-color: #f5f7fa;
  padding: 18px 20px;
  border-right: 1px solid #ebeef5;
  min-height: 80px;
  display: flex;
  align-items: center;
}

:deep(.custom-descriptions .el-descriptions__content) {
  flex: 1;
  color: #303133;
  padding: 18px 20px;
  background-color: #ffffff;
  min-height: 80px;
  display: flex;
  flex-direction: column;
}

/* 错误提示样式 */
.error-message {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 确保单元格边框正确显示 */
:deep(.custom-descriptions .el-descriptions__cell) {
  padding: 6px !important;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-descriptions .el-descriptions__row:last-child .el-descriptions__cell) {
  border-bottom: none;
}
</style>